<template>
  <div id="FlashApproval">
    <!--查询输入框-->
    <div class="flashApproval-search rowBS">
      <van-field label=""
                 v-model="searchFormMixin.assemblyPlant"
                 placeholder="请输入整车厂" class="widthPx-180"/>
      <van-field label=""
                 v-model="searchFormMixin.vehicleModel"
                 placeholder="请输入控制单元类型" class="widthPx-180"/>
      <van-field label=""
                 v-model="searchFormMixin.vanNumber"
                 placeholder="请输入van码" class="widthPx-180"/>
      <div
          @click="showPicker=true"
          class="d-inline-block all-select-btn">
        <span class="widthPx-100">{{packingValue||'全部'}}</span>
        <svg-icon  icon-class="btn-positon-icon"  class="ml-1" />
      </div>
    </div>
    <!--查询按钮-->
    <div class="rowEC">
      <div class="search-btn" @click="initPageLoad">查询</div>
    </div>
    <!--列表-->
    <van-pull-refresh  class="freshScroll" v-model="refreshing" @refresh="onRefresh">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <div
            @click="routerPush(item)"
            v-for="(item,index) in listData" :key="index"
            class="flashApproval-list-item">
          <div class="list-item-top rowSS">
            <h4>整车厂：{{item.assemblyPlant}}</h4>
            <h4>控制单元：{{item.vehicleModel}}</h4>
            <h4>VAN:{{item.vanNumber}}</h4>
            <h4>区域：{{item.area}}</h4>
          </div>
          <div class="list-item-btn mb-1">
            <span>拒绝原因：{{item.refuseReason||'-'}}</span>
          </div>
          <div class="list-item-btn rowBS">
            <span>申请时间：{{item.ctime}}</span>
            <div v-if="item.audit==0" class="ds-btn">待审核</div>
            <div v-if="item.audit==1" class="tg-btn">审核通过</div>
            <div v-if="item.audit==-1" class="sp-btn">拒绝</div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <van-popup v-model="showPicker" position="bottom" :overlay="false">
      <van-picker
          title="选择"
          show-toolbar
          :columns="columns"
          value-key="label"
          @confirm="onConfirm"
          @cancel="showPicker=false"
      />
    </van-popup>
  </div>
</template>

<script>
  // import { mapState, mapMutations, mapActions } from 'vuex'
  // import validMixins from '@/mixins/validMixins.js'
  export default {
    name: 'WritingApplicationList',
    components: {
      // TablesGZCJ,
    },
    // mixins: [validMixins],
    props: {
      // treeData: Array,
    },
    // mixins: [validMixins],
    data() {
      return {
        columns: [
          {value:"",label:"全部"},
          {value:0,label:"待审核"},
          {value:1,label:"审核通过"},
          {value:-1,label:"拒绝"},
        ],
        showPicker:false,
        packingValue:"",
        //下拉刷新
        loading:false,
        finished:false,
        refreshing:false,
        page: 0,
        pageSize: 20,
        listData:[],
      }
    },
    computed: {
      // ...mapState('user', ['token', 'userInfo'])
    },
    watch: {
      // 'cmAddForm.enginePlatform': function(val) {
      //   console.log('enginePlatformval', val)
      //   if (val) {
      //     this.emissionOptionReq()
      //   }
      // }
    },
    created() {
      this.initPageLoad();
    },
    activated(){
      this.initPageLoad();
    },
    methods: {
      initPageLoad(){
        this.finished = false
        this.page = 0
        this.pageSize = 20
        this.listData = []
        this.getListData();
      },
      onLoad() {
        this.refreshing=false;
        this.page = this.page + 1
        if (!this.finished) { // 为true则刷新数据
          this.getListData()
        }
      },
      onRefresh() {
        this.initPageLoad()
      },
      onConfirm(item){
        this.searchFormMixin.audit=item.value
        this.packingValue=item.label
        this.showPicker=false
      },
      routerPush(item) {
        const urlData = {
          params: item,
          from: 'FlashApproval'
        }
        this.routerPushMixin('WritingApplicationDetail', urlData)
      },
      /*数据请求*/
      /*审批相关*/
      getListData() {
        const data = Object.assign({page:this.page,size:this.pageSize},this.searchFormMixin)
        this.$axiosReq({
          url: 'vehicleIniApply/listVehicleIniApplyByCuser',
          data,method: 'get', bfLoading: true,isParams:true,
        }).then(res => {
          if (res.data.content&&(res.data.content.length<this.pageSize)) { // 少于10条数据时将下拉请求关闭
            this.finished = true
          }
          this.listData = this.listData.concat(res.data.content)
          this.refreshing=false
          this.loading=false
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /*搜索*/
  .flashApproval-search {
    padding:3px;
    flex-wrap: wrap;
  }
  .search-btn {
    margin-right: 10px;
    margin-top: 10px;
    text-align: center;
    height: 30px;
    border-radius: 6px;
    line-height: 30px;
    width: 90px;
    font-size: 14px;
    color: #fff;
    background-color: #F95A2C;
  }
  /*列表*/
  .flashApproval-list {
    margin-top: 20px;
  }
  //每个列表的item
  .flashApproval-list-item {
    background-color: #fff;
    padding: 15px 10px;
    margin:0 4px;
    margin-bottom: 10px;
    border-radius: 4px;
    .list-item-top {
      flex-wrap: wrap;
      h4 {
        font-size: 14px;
        margin-bottom: 15px;
        font-weight: 500;
        width: 46vw;
      }
    }
    //底部申请时间的审批按钮
    .list-item-btn{
      span{
        color: #666;
        font-size: 14px;
      }
      //审批按钮
      .sp-btn{
        padding:4px 4px;
        border-radius: 4px;
        color: #666;
        border:1px solid #666
      }
      //待审批
      .ds-btn{
        padding:4px 4px;
        border-radius: 4px;
        color: #F95A2C;
        border:1px solid #F95A2C
      }
      //已通过
      .tg-btn{
        padding:4px 4px;
        border-radius: 4px;
        color: #728FBA;
        border:1px solid #728FBA
      }
    }
  }
  .all-select-btn{
    margin-top: 3px;
    background-color: #fff;
    width: 179px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    color:#999;
  }
  .freshScroll{
    margin-top: 10px;
    height: 68vh;
    overflow-y: auto;
  }
</style>




